<template>
  <div>
    <!-- 提交问题按钮 -->
    <el-button type="primary" @click="dialogVisible = true">提交问题</el-button>

    <!-- 弹窗表单 -->
    <el-dialog v-model="dialogVisible" title="信息-ERP运维" width="40%">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="运维公司" prop="company">
          <el-select v-model="form.company" placeholder="请选择公司名称" style="width: 100%;">
            <el-option label="湖南公司" value="100" />
            <el-option label="湖南生物公司" value="105" />
            <el-option label="湘西公司" value="110" />
            <el-option label="怀化公司" value="115" />
            <el-option label="益阳公司" value="120" />
            <el-option label="岳阳公司" value="125" />
            <el-option label="衡阳公司" value="130" />
            <el-option label="邵阳公司" value="135" />
          </el-select>
        </el-form-item>

        <el-form-item label="提出时间" prop="time">
          <el-date-picker v-model="form.createTimeStr" type="datetime" placeholder="请选择时间" style="width: 100%;" />
        </el-form-item>

        <el-form-item label="系统" prop="systemName">
          <el-select v-model="form.systemName" placeholder="请选择系统名称" style="width: 100%;">
            <el-option label="ERP" value="ERP" />
            <el-option label="WMS" value="WMS" />
            <el-option label="PMS" value="PMS" />
            <el-option label="B2B" value="B2B" />
            <el-option label="OMS" value="OMS" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>

        <el-form-item label="提出人" prop="subName">
          <el-input v-model="form.subName" placeholder="请输入提出人姓名" />
        </el-form-item>

        <el-form-item label="模块" prop="module">
          <!-- 模块下拉框的value还未改 -->
          <el-select v-model="form.module" placeholder="请选择模块名称" style="width: 100%;">
            <el-option label="质量" value="质量" />
            <el-option label="采购" value="采购" />
            <el-option label="销售" value="销售" />
            <el-option label="物流" value="物流" />
            <el-option label="财务" value="财务" />
          </el-select>
        </el-form-item>

        <el-form-item label="问题分类" prop="category">
          <el-select v-model="form.category" placeholder="请选择问题分类" style="width: 100%;">
            <el-option label="操作指导" value="操作指导" />
            <el-option label="咨询" value="咨询" />
            <el-option label="后台-数据处理" value="后台-数据处理" />
            <el-option label="后台-配置" value="后台-配置" />
            <el-option label="打印相关" value="打印相关" />
            <el-option label="系统故障" value="系统故障" />
            <el-option label="岗位权限" value="岗位权限" />
            <el-option label="新增需求" value="新增需求" />
            <el-option label="新增小仓" value="新增小仓" />
            <el-option label="数据导入" value="数据导入" />
            <el-option label="数据导出" value="数据导出" />
            <el-option label="不予处理" value="不予处理" />
            <el-option label="其他系统处理" value="其他系统处理" />

          </el-select>
        </el-form-item>

        <el-form-item label="菜单名称" prop="menu">
          <el-input v-model="form.menu" placeholder="如有明确菜单请准确提供完整名称" />
        </el-form-item>

        <el-form-item label="问题描述" prop="content">
          <el-input v-model="form.content" placeholder="可提供问题工号部门等信息" type="textarea" />
        </el-form-item>

         <el-form-item label="上传图片">
            <el-upload
              class="upload-demo"
              :http-request="customUpload"
              list-type="picture-card"
              :on-success="handleUploadSuccess"
              :show-file-list="true"
              name="file"
              :headers="{ token: dataInfo.user.accessToken }"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
      </el-form>

      <!-- 操作按钮 -->
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref,reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request.js'
import { Plus } from '@element-plus/icons-vue'



const imageUrl = ref('')
const imageList = ref([])
const dialogVisible = ref(false)
const formRef = ref(null)


const dataInfo =reactive({
    user: JSON.parse(localStorage.getItem("code_user")||"{}"),
})

const customUpload = async (option) => {
  const formData = new FormData()
  formData.append('file', option.file)

  try {
    const res = await request.post('/api/upload', formData)
    option.onSuccess(res)
  } catch (err) {
    console.error('上传失败:', err)
    option.onError(err)
    ElMessage.error('上传失败')
  }
}



const form = ref({
  hnyyFeedbackId:'',
  company: '',
  createTimeStr: '',
  systemName: '',
  subName: '',
  module: '',
  category: '',
  menu: '',
  content: '',
  url:'',
  opFlag:'0'
})

const rules = {
  company: [{ required: true, message: '请选择公司名称', trigger: 'blur' }],
  createTimeStr: [{ required: true, message: '请选择时间', trigger: 'change' }],
  systemName: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
  subName: [{ required: true, message: '请输入提出人姓名', trigger: 'blur' }],
  module: [{ required: true, message: '请输入模块', trigger: 'blur' }],
  category: [{ required: true, message: '请输入问题分类', trigger: 'blur' }],
  content: [{ required: true, message: '请输入问题描述', trigger: 'blur' }],
}

const handleUploadSuccess = (response) => {
  if (response?.url) {
    imageList.value.push(response.url)
    imageUrl.value = imageList.value.join(',')
  }
}

const handleRemove = (file) => {
  console.log('file====>',file)
  const url = file.response?.url || file.url
  if (url) {
    imageList.value = imageList.value.filter(item => item !== url)
    imageUrl.value = imageList.value.join(',')
  }
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      ElMessage.warning('请填写完整表单！')
      return
    }
    console.log('form.value',form.value)
    form.value.url = imageUrl.value
    request.post('/feedback/add', form.value)
      .then(response => {
        console.log('response',response)
        if (response.code === 200) {
          ElMessage.success('提交成功！')
          dialogVisible.value = false
          form.value = {
            hnyyFeedbackId:'',
            company: '',
            createTimeStr: '',
            systemName: '',
            subName: '',
            module: '',
            category: '',
            menu: '',
            content: '',
            url:'',
            opFlag:'0'
          }
        } else {
          ElMessage.error('提交失败：' + response.msg)
        }
      })
      .catch(error => {
        ElMessage.error('网络错误，请稍后再试！')
        console.error(error)
      })

    console.log('提交表单：', form.value)
    dialogVisible.value = false
  })
}
</script>

<style scoped>
.el-form {
  max-height: 65vh;
  overflow-y: auto;
}
</style>
